import {
  Row,
  Col,
  Form,
  Input,
  Button,
  Modal,
} from 'antd';


import React from 'react';
import { connect } from 'dva';

// const R = require('ramda');
const FormItem = Form.Item;

const resetPsdForm = Form.create()(
  class CreateForm extends React.Component {
    constructor(props: any) {
      super(props);
      this.state = {
        open: false,
      };
    }

    handleConfirm = (props: any) => {
      // @ts-ignore
      const { dispatch } = this.props;
      // @ts-ignore
      this.props.form.validateFields((errors: any, values: any) => {
        if (errors) return;
        console.info(dispatch);
        dispatch({
          type: '/userManage/query',
          payload: {
            ...values,
            onSuccess: () => {
            },
          },
        });
        this.handleCancel();
      });
    };

    handleOpen = () => {
      this.setState({ open: true });
    };

    handleCancel = () => {
      // @ts-ignore
      this.props.form.resetFields();
      this.setState({ open: false });
    };

    render() {
      // @ts-ignore
      const { getFieldDecorator } = this.props.form;
      const formItemLayout = { labelCol: { sm: { span: 8 } }, wrapperCol: { sm: { span: 14 } } };

      const footer = [];
      footer.push(
        // eslint-disable-next-line react/jsx-no-bind
        <Button key="cancel" size="large" onClick={this.handleCancel.bind(this)}>
          取消
        </Button>,
      );


      footer.push(
        // @ts-ignore
        // eslint-disable-next-line react/jsx-no-bind
        <Button key="submit" size="large" loading={this.props.loading} onClick={this.handleConfirm.bind(this)}>
          确认
        </Button>,
      );

      return (
        <Modal
          destroyOnClose
          title="重置密码"
          // @ts-ignore
          visible={this.state.open}
          width={800}
          footer={footer}
          onCancel={this.handleCancel}
        >
          <Form>
            <Row>
              <Col span={12}>
                <FormItem {...formItemLayout} label="新密码" hasFeedback>
                  {getFieldDecorator('bankname', {
                    rules: [{ required: true, message: '请输入密码！' }],
                    initialValue: '',
                  })(<Input type="loginPwd" maxLength={50} />)}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem {...formItemLayout} label="确认密码" hasFeedback>
                  {getFieldDecorator('confirmLoginPwd', {
                    rules: [
                      {
                        required: true,
                        message: '请确认密码！',
                      },
                    ],
                    initialValue: '',
                  })(<Input type="password" maxLength={100} />)}
                </FormItem>
              </Col>
            </Row>

          </Form>
        </Modal>
      );
    }
  },
);

function mapStateToProps(state: any) {
  return {
    loading: state.loading.models.creditFinance,
  };
}

export default connect(mapStateToProps)(resetPsdForm);
